<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">
            <script>
                function title() {
                    document.getElementById('admin').className='selected';
                }
                window.onload=title;
            </script>
            <h:form id="incomeCreate" enctype="multipart/form-data">
                <h1 class="title">
                    <a href="#" class="back" onclick="history.go(-1)"/>
                    Consultar Registro de Saída
                </h1>
                <p:messages showDetail="true" autoUpdate="true"  /> 
                <div class="row">
                    <div class="twelve columns">
                        <fieldset>
                            <legend> <h4 style="margin:0 0 10px 0">Filtros</h4></legend>
                            <p:panel id="resultPanel" style="background: none; border: none;" 
                                     styleClass="container_24 clearfix " >

                                <p:outputLabel for="tipo" value="Tipo de Saída:" styleClass="grid_4"/>  
                                <div class="grid_5">
                                    <p:selectOneMenu value="#{managerSearchFinancialOutput.income.typeDebt}" 
                                                     id="tipo" styleClass="grid_4" style="width: 100%;" >  
                                        <f:selectItem itemLabel="" itemValue="" />  
                                        <f:selectItems  value="#{managerSearchFinancialOutput.selectTypeOutput()}"/>  
                                    </p:selectOneMenu>
                                </div>
                                <p:outputLabel for="de" value="De: " styleClass="grid_2"/>  
                                <p:calendar id="de" value="#{managerSearchFinancialOutput.dateInitial}"
                                            styleClass="grid_4"  showOn="button" pattern="dd/MM/yyyy"/> 

                                <p:outputLabel for="ate" value="Até: " styleClass="grid_2"/>  
                                <p:calendar id="ate" value="#{managerSearchFinancialOutput.dateFinal}" 
                                            styleClass="grid_4"  showOn="button" pattern="dd/MM/yyyy"/>

                                <div class="clear"/>

                                <div class="buttonAction">
                                    <p:commandButton value="Pesquisar" icon="ui-icon-search" process="@form"
                                                     update="@form"
                                                     actionListener="#{managerSearchFinancialOutput.search()}" />
                                </div>

                                <p:dataTable id="tableEntrada" var="in" value="#{managerSearchFinancialOutput.incomes}" 
                                             styleClass="grid_24"
                                             rowIndexVar="rowid"
                                             rowKey="#{r.id}"
                                             rows="15" paginator="true"  
                                             paginatorPosition="bottom"
                                             emptyMessage="Nenhum registro"
                                             >  
                                    <f:facet name="header">
                                        Registros
                                    </f:facet>
                                    <p:column headerText="Ações">  
                                        <p:commandButton icon="ui-icon-pencil" style="position: relative;"  
                                                         oncomplete="dlgincome.show();" alt="Editar" title="Editar"
                                                         actionListener="#{managerSearchFinancialOutput.loadEditar(rowid)}"
                                                         process="@this" update="@this, :formdlg:incomePanel"/>

                                        <p:commandButton icon="ui-icon-trash" style="position: relative;"  
                                                         oncomplete="dlgincomeremove.show();" alt="Remover" title="Remover"
                                                         actionListener="#{managerSearchFinancialOutput.loadRemover(rowid)}"
                                                         process="@this" update="@this, :formdlg:incomePanelRemove"/>
                                    </p:column>  
                                    <p:column headerText="Tipo" width="400">  
                                        <h:outputText value="#{in.typeDebt.desc}"/>
                                    </p:column>  
                                    <p:column headerText="Data Realização" width="400">  
                                        <h:outputText value="#{in.createAt}">
                                            <f:convertDateTime pattern="dd/MM/yyyy" />
                                        </h:outputText>
                                    </p:column>  
                                    <p:column headerText="Descrição" width="400" style="white-space: pre-wrap;">  
                                        <h:outputText value="#{in.descricao}"/>
                                        <f:facet name="footer"> 
                                            <h:outputText value="Total" 
                                                          style="float: right; font-weight:bold;"/>
                                        </f:facet> 
                                    </p:column>  
                                    <p:column headerText="Valor Total" width="400" style="text-align: right;">  
                                        <h:outputText value="#{in.totalAmount}"/>
                                        <f:facet name="footer"> 
                                            <h:outputText value="#{managerSearchFinancialOutput.total}" 
                                                          style="float: right; font-weight:bold;"/>
                                        </f:facet> 
                                    </p:column>
                                </p:dataTable>

                            </p:panel>
                        </fieldset>
                    </div>
                </div>

            </h:form>
            <h:form id="formdlg">
                <p:dialog widgetVar="dlgincome" resizable="false" width="600" header="Editar Saída">

                    <p:panel id="incomePanel" style="background: none; border: none;" 
                             styleClass="container_24 clearfix " >

                        <p:outputLabel for="createtipo" value="Tipo de Saída:" styleClass="grid_5"/>  
                        <div class="grid_18">
                            <p:selectOneMenu value="#{managerSearchFinancialOutput.incomeeditar.typeDebt}" 
                                             id="createtipo" styleClass="grid_17"  >  
                                <f:selectItem itemLabel="" itemValue="" />  
                                <f:selectItems  value="#{managerFinancialOutput.selectTypeOutput()}"/>  
                            </p:selectOneMenu>
                        </div>
                        <div class="clear"/>

                        <p:outputLabel value="Valor:" styleClass="grid_5"/>  
                        <p:inputText id="createfamount" styleClass="grid_17" required="true"
                                     requiredMessage="O campo 'valor' é necessário"
                                     value="#{managerSearchFinancialOutput.incomeeditar.totalAmount}"
                                     onkeypress="jQuery(this).autoNumeric({aSign:'R$ ',aSep: '.', aDec: ','} );">
                            <f:convertNumber type="currency" locale="pt,BR"/>
                        </p:inputText>

                        <div class="clear"/>

                        <p:outputLabel value="Data:" styleClass="grid_5"/>  
                        <div class="grid_17">
                            <p:calendar value="#{managerSearchFinancialOutput.incomeeditar.createAt}" 
                                        showOn="button" pattern="dd/MM/yyyy"/>
                        </div>

                        <div class="clear"/>

                        <p:outputLabel value="Descrição:" styleClass="grid_5"/>  
                        <p:inputTextarea value="#{managerSearchFinancialOutput.incomeeditar.descricao}" styleClass="grid_17" />


                        <div class="clear"/>

                        <div class="buttonAction">
                            <p:commandButton value="Editar" icon="ui-icon-disk" process="@form"
                                             update="@form, :incomeCreate"
                                             actionListener="#{managerSearchFinancialOutput.editar()}" />
                        </div>
                    </p:panel>
                </p:dialog>
                
                <p:dialog widgetVar="dlgincomeremove" resizable="false" width="400" header="Deseja remover a despesa ?">

                    <p:panel id="incomePanelRemove"  style="background: none; border: none;" 
                             styleClass="container_24 clearfix " >

                        <h:outputText  value="Confirmo a exclusão da despesa" styleClass="grid_23"/>  
                        <div class="clear"/>

                        <div class="buttonAction">
                            <p:commandButton value="Sim" icon="ui-icon-disk" process="@this"
                                             update="@form"
                                             actionListener="#{managerSearchFinancialOutput.remover()}" />
                            <p:commandButton value="Não" icon="ui-icon-close" process="@this"
                                             update="@form" onclick="dlgincomeremove.hide();" />
                        </div>
                    </p:panel>
                </p:dialog>
                
            </h:form>
        </ui:define>
    </ui:composition>

</html>
